<template>
  <!-- 上传 -->
  <div class="qrcode-container">
    <div class="backbar fix-bar">
      <div class="back flex-center" v-hammer:tap="(ev) => $router.push({name: 'My'})">
        <i class="fa fa-angle-left fa-lgl"></i>
        <span>返回</span>
      </div>
    </div>

    <div class="group-container">
      <div class="qrcode-wrapper">
        <div class="info flexbox justify-center">
          <div class="info-item head">
            <img :src="info.headUrl" alt class="head-url" />
          </div>
          <div class="info-item basic-info flexbox column justify-around">
            <div class="group-owner">
              <span class="owner-name">{{ info.nickname }}</span>
              <!-- <span>
                <i
                  class="fa gender-icon"
                  :class="`fa-${groupSetting.managerInfo.userSex === 1 ? 'male' : 'female'}`"
                ></i>
              </span>-->
            </div>

            <div class="group-id">
              <span v-if="score">积分: {{ score }} </span>
              <span>群聊ID: {{ userId }}</span>
            </div>
          </div>
        </div>

        <div class="qrcode-image">
          <img v-if="qrUrl === ''" src="@/assets/images/qrcode_default.png" alt />
          <img v-else :src="qrUrl" alt />

          <!-- <qrcode v-else tag="img" :value="qrUrl" :options="{ width: 200 }" /> -->

          <input type="file" accept="image/*" class="file-input" @change="onImageChange" />
        </div>

        <div class="tip">点击二维码部分, 可上传自己的二维码</div>
      </div>

      <div class="action flexbox justify-center">
        <div class="upload-qrcode">
          <span>上传二维码</span>
          <input type="file" accept="image/*" class="file-input" @change="onImageChange" />
        </div>
      </div>
    </div>

    <!-- 发送图片之前的预览 -->
    <send-image-preview
      v-if="showImagePreview"
      :image="imageBase64"
      sendText="上传"
      @cancel="onCancelImage"
      @send="onSendImage"
    />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, Mutation, Getter, namespace } from 'vuex-class';
import { RawLocation } from "vue-router";
import { MsgTypeKV } from '@/api/socket/imClient';
import MessageMixin from '@/mixins';
import { Webim } from '@/utils/types';
import { Api } from '@/api/http';
declare const $Vue: Vue;
declare const webim: Webim;
const chatModule = namespace('chatModule');
const userModule = namespace('userModule');

@Component<MyQrcode>({
  mixins: [MessageMixin],
})
export default class MyQrcode extends Vue {
  @chatModule.State("groupSetting") groupSetting: any;
  @userModule.State("loginInfo") loginInfo: any;

  private eventList: Array<string> = [
    "$getGroupQrcode",
    "$getUserQrcode",
  ];

  private status: boolean = true;
  private userId: string = '';

  private score: any = 0;

  private group: any = {
  };

  private qrUrl: string = '';
  // 预览
  private showImagePreview: boolean = false;
  private imageFile: any = null;
  private imageBase64: string = '';
  private info: any = {};

  // 能否进行编辑
  private allowEdit: boolean = false;

  /**
   * 生命周期函数
   */
  protected mounted() {
    this.initEvents(this.eventList);

    let userId: any = localStorage.getItem('userId');
    this.userId = userId;

    this.sendMessage(MsgTypeKV.getUserQrcode, {
      imAccount: this.loginInfo.identifier,
    });

  }

  /*
   * 选取图片用于发送
   */
  private onImageChange(ev: any) {
    let file = ev.target.files[0];
    this.handleImageFile(file);
    this.imageFile = file;
    this.showImagePreview = true;
  }

  private handleImageFile(file: File) {
    const reader = new FileReader();
    // 使用base64上传
    reader.onload = (ev: any) => {
      this.imageBase64 = ev.target.result;
    };
    reader.readAsDataURL(file);
  }

  /**
   * 发送图片
   */
  private onSendImage() {
    this.uploadMyQrcode(this.imageFile);
    this.showImagePreview = false;
  }

  private onCancelImage() {
    this.showImagePreview = false;
    this.imageFile = null;
  }

  /**
   * 获取已有的二维码
   */
  private getQrcode() {
  }


  private uploadQrcode() {

  }


  /**
   * 获取到用户qrcode
   */
  private $getUserQrcode(data: any) {
    let payQr = data.info.payQr;
    this.score = data.info.score || '';
    this.status = data.info.status || '';
    if (payQr) {
      this.qrUrl = payQr;
    }
    this.info = data.info;
  }

  /**
   * 上传二维码
   */
  private async uploadMyQrcode(file: File) {
    let token: any = sessionStorage.getItem("token");
    let form: FormData = new FormData();
    form.append('file', file);
    const params = {
      token,
      form,
    };
    const { data } = await Api.uploadMyQrcode.r(params);
    console.warn('uploadMyQrcode', data);
    this.imageFile = null;
    this.showImagePreview = false;
    if (data.result === 0) {
      this.qrUrl = data.data;
      this.$createToast({
        txt: '上传成功',
        type: "correct",
        time: 3000
      }).show();
    } else {
      this.qrUrl = '';
    }
  }

  /**
   * 获取群已有的
   */
  private $getGroupQrcode(data: any) {
    if (data.result === 0) {
      // this.qrUrl = data.qrUrl;
    } else {
      this.$createToast({
        txt: data.message,
        type: "warn",
        time: 3000
      }).show();
    }
  }
}
</script>

<style lang="stylus" scoped>
.qrcode-container
  background #efefef
  width 100% 
  height 100% 
.group-container
  width 100%
  height 100%
  background #efefef
  padding 12px
  box-sizing border-box
  .qrcode-wrapper 
    background white
    padding 24px
    border-radius 4px
    .info
      display flex
      .head 
        flex-basis 18%
        .head-url 
          width 100%
          border-radius 8px
      .basic-info
        flex-basis 82%
        padding-left 16px
        .group-level, .group-id
          color #898989
          text-align left
          font-size 14px
        .group-owner
          text-align left
    .qrcode-image
      height 300px
      margin-top 44px
      position relative
      img 
        width 90%
        height 90%
  .action
    margin-top 10px
    .upload-qrcode 
      background rgb(87, 189, 113)
      width 180px
      height 40px
      line-height 40px
      border-radius 4px
      color white
      position relative
      font-size 18px
      input
        position absolute
        width 100%
        height 100%
        top 0
        left 0
        opacity 0
.gender-icon
  font-size 18px
  &.fa-male
    color #940592;
  &.fa-female
    color #f44778

.owner-name
  display inline-block
  margin-right 18px

.tip
  font-size 12px 
  color #909090

</style>

